<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">个人信息</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">修改密码</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 下面修改的内容 -->
    <div class="add_update_div">
      <h2>账号管理</h2>
      <el-form ref="form" :model="form" label-width="80px" class="add_form">
        <el-form-item label="登陆账号">
          <el-input v-model="form.id" placeholder="111" class="add_input_css"></el-input>
        </el-form-item>
      </el-form>
      <h2>修改密码</h2>
      <el-form
        :model="passForm"
        status-icon
        :rules="rules"
        ref="passForm"
        label-width="100px"
        class="demo-passForm add_form"
      >
        <el-form-item label="旧密码" prop="password">
          <el-input type="password" v-model="passForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="password1">
          <el-input type="password" v-model="passForm.password1" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="password2">
          <el-input type="password" v-model="passForm.password2" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button plain @click="passSave('passForm')" class="btn_css">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    var validatePass3 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入旧密码"));
      } else {
        if (this.passForm.password !== "") {
          this.$refs.passForm.validateField("password2");
        }
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.passForm.password2 !== "") {
          this.$refs.passForm.validateField("password2");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.passForm.password1) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      id: 8,
      form: {
        id: ""
      },
      passForm: {
        password: "",
        password1: "",
        password2: ""
      },
      rules: {
        // oldPass: [{ validator: validatePass3, trigger: "blur" }],
        password1: [{ validator: validatePass, trigger: "blur" }],
        password2: [{ validator: validatePass2, trigger: "blur" }],
        password: [{ validator: validatePass3, trigger: "blur" }]
      }
    };
  },
  methods: {
    passSave(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // alert("submit!");
          this.$axios({
            url: "/staff/changePassword",
            method: "post",
            data: {
              id: this.id,
              password: this.password,
              password1: this.password1,
              password2: this.password2
            }
          }).then(res => {
            console.log(res);
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  },
  mounted() {
    sessionStorage.setItem("fName", "UpdatePassword");
  }
};
</script>
<style scoped lang="less">
.btn_css {
  background-color: #f5f7fa;
  border: 1px solid #eee;
  width: 150px;
  height: 40px;
  display: block;
  font-size: 14px;
  margin: 20px auto;
}
h2 {
  margin: 20px;
}
/deep/.add_input_css {
  /deep/.el-input__inner{
    border: none;
  }
  // border: 0px;
}
.add_form {
  margin-left: 90px;
}
.add_update_div {
  width: 450px;
}
</style>